<template>
  <div class="title-details" id="fix">
    <div class="back" @click="backHandler">
        <i class="iconfont">&#xe657;<span>{{ $route.meta.title }}</span></i>
    </div>
    <div>
       <i class="iconfont more1"><a href="/home">&#xe619;</a></i>
        <i class="iconfont more"><a href="">&#xe67f;</a>
            <span>{{ $route.meta.info }}</span>
        </i>
    </div>
  </div>
</template>

<script>
// route是在该路由页面中存储得本页面的相关信息，可直接调用$route来渲染，而$router则是显示所有路由信息.
export default {
  name: 'TitleDeatils',
  methods: {
    backHandler () {
      this.$router.back()
    }
  },
  created () {
    console.log(this)
  }
}
</script>

<style lang="scss" scoped>
    a{
      text-decoration: none;
      color: black;
    }
    // #fix{
    //    position:fixed;
    //    width: 100%;
    //    top:0px;
    //    z-index:3;
    // }
    .title-details{
        background:#FF6600;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont{
          span{
                margin-left: 4px;
                font-size: 13px;
            }
        }
        .more{
            font-size: 15px;
            span{
                margin-left: 4px;
                font-size: 13px;
            }
        }
        .more1{
          margin-right: 10px;
          font-size: 20px;
        }
    }
</style>
